<template>
	<view class="calendar-container">
		<!-- 头部 -->
		<view class="calendar-header">
			<view class="header-btn" @click="prevMonth">‹</view>
			<text class="month-year">{{ currentYear }}年{{ currentMonth }}月</text>
			<view class="header-btn" @click="nextMonth">›</view>
		</view>

		<!-- 星期行 -->
		<view class="weekdays">
			<view class="weekday" v-for="(day, index) in weekdays" :key="index">{{ day }}</view>
		</view>

		<!-- 日期网格 -->
		<view class="dates-grid">
			<view class="date-item" v-for="(date, index) in dates" :key="index" :class="{
          'today': date.isToday,
          'selected': date.isSelected,
          'disabled': date.isDisabled
        }" @click="selectDate(date)">
				<text class="date-number">{{ date.day }}</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="calendar-footer">
			<button class="today-btn" @click="goToday">今天</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				selectedDate: null,
				weekdays: ['日', '一', '二', '三', '四', '五', '六']
			}
		},
		computed: {
			currentYear() {
				return this.currentDate.getFullYear()
			},
			currentMonth() {
				return this.currentDate.getMonth() + 1
			},
			dates() {
				const year = this.currentDate.getFullYear()
				const month = this.currentDate.getMonth()
				const firstDay = new Date(year, month, 1)
				const lastDay = new Date(year, month + 1, 0)

				// 获取当月第一天是星期几（0-6）
				const firstDayWeek = firstDay.getDay()

				// 获取当月天数
				const daysInMonth = lastDay.getDate()

				// 生成日期数组（包含上月末尾和次月上旬）
				const dates = []
				// 添加上月末尾
				for (let i = 0; i < firstDayWeek; i++) {
					const prevMonthLastDay = new Date(year, month, 0)
					dates.unshift({
						day: prevMonthLastDay.getDate() - i,
						isCurrentMonth: false,
						isToday: false,
						isSelected: false,
						isDisabled: true
					})
				}

				// 添加本月日期
				for (let i = 1; i <= daysInMonth; i++) {
					dates.push({
						day: i,
						isCurrentMonth: true,
						isToday: this.isToday(i, month, year),
						isSelected: this.isSelected(i, month, year),
						isDisabled: false
					})
				}

				return dates
			}
		},
		methods: {
			// 判断是否今天
			isToday(day, month, year) {
				return day === this.currentDate.getDate() &&
					month === this.currentDate.getMonth() &&
					year === this.currentDate.getFullYear()
			},

			// 判断是否选中
			isSelected(day, month, year) {
				if (!this.selectedDate) return false
				return day === this.selectedDate.getDate() &&
					month === this.selectedDate.getMonth() &&
					year === this.selectedDate.getFullYear()
			},

			// 切换月份
			prevMonth() {
				this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1)
			},
			nextMonth() {
				this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1)
			},

			// 选择日期
			selectDate(date) {
				if (date.isDisabled) return
				this.selectedDate = new Date(date.day, this.currentDate.getMonth(), this.currentDate.getFullYear())
				this.$emit('date-selected', this.selectedDate)
			},

			// 跳转今天
			goToday() {
				this.currentDate = new Date()
				this.selectDate({
					day: this.currentDate.getDate(),
					month: this.currentDate.getMonth(),
					year: this.currentDate.getFullYear()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$primary-color: #2d8cf0;
	$bg-color: #f8f9fa;
	$text-color: #333;
	$disabled-color: #c6c9cc;

	.calendar-container {
		width: 100%;
		background: $bg-color;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.calendar-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;

		.header-btn {
			font-size: 24px;
			color: $primary-color;
			cursor: pointer;
		}

		.month-year {
			font-size: 18px;
			font-weight: bold;
			color: $text-color;
		}
	}

	.weekdays {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		text-align: center;
		margin-bottom: 12px;
		color: #666;
	}

	.dates-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 8px;
	}

	.date-item {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s;

		.date-number {
			font-size: 14px;
			color: $text-color;
		}

		&.today {
			background: rgba(45, 140, 240, 0.1);

			.date-number {
				color: $primary-color;
				font-weight: bold;
			}
		}

		&.selected {
			background: $primary-color;

			.date-number {
				color: white;
				font-weight: bold;
			}
		}

		&.disabled {
			color: $disabled-color;
			cursor: not-allowed;
		}
	}

	.calendar-footer {
		margin-top: 16px;
		text-align: center;

		.today-btn {
			background: transparent;
			border: 1px solid $primary-color;
			color: $primary-color;
			padding: 6px 24px;
			border-radius: 20px;
			font-size: 14px;
		}
	}
</style>